<template>
    <div class="card rdsp-card-view" data-page="troubleRank">
        <div class="card-content rank-content card-content-padding">
            <p class="rdsp-card-title">单位实时安全指数</p>
            <!--<div id="card-title" class="trouble-title card-header ">单位实时安全指数</div>-->
            <img src="{{staticPath}}img/mine/sortbtn.png" class="pxbtn" id="clickbtn">
            <div class="card-content card-content-padding">
                <div class="list media-list no-hairline-top no-hairline-bottom" style="margin-bottom: 6px;">
                    <ul id="safetContent">


                    </ul>
                </div>
            </div>
        </div>

        <a href="/unitSafetyExponentMore/" class="morelist" data-view=".view-main">
            <i class="iconfont app-icon-down icon-xiala"></i>
        </a>
    </div>
</template>

<style scoped>
    .pxbtn{
        position: absolute;
        right: 20px;
        top: 19px;
        width:18px;
    }
    .rank-content {
        padding-bottom: 0px;
    }

    .trouble-title {
        padding-right: 0px;
        padding-left: 0px;
        font-size: 14px;
    }
    #rankContent .item-inner:last-child:after {
        width: 0px;
    }
    #rankContent:before, #rankContent:after {
        height: 0px !important;
        width: 0px !important;
    }
    .md .list ul:before {
        height: 0px !important;
        width: 0px !important;
    }
    .md .list ul:after {
        height: 0px !important;
        width: 0px !important;
    }
    .column{
        height: 7px;
        margin-top: 8px;
        border-top-left-radius: 0px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 0px;
    }
    .safetUnitName{
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
    }
    .column_num{
        font-size: 13px;
        color: #666666;
    }

</style>

<script>
    return {
        mounted() {
            var self = this;
            self.id_org = userInfor.organizationIds;
            self.getUnitSafety();//获取单位实时安全指数

            //排序按钮
            $("#clickbtn").on("click",function(){
                $("#safetContent").empty();
                self.datalist(self.list.reverse());
            });
        },
        data: function () {
            return {
                list:[],
            }
        },

        methods: {
            getUnitSafety: function () {
                var self = this;
                var $ = self.$$;
                Dao.getSafetyOrgList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds:self.id_org,
                    queryType:0,
                    pageIndex:0,
                    pageSize:25,
                },function (data) {
                    data.sort(function(a,b){
                        return parseFloat(b.score) - parseFloat(a.score);
                    });
                    self.list=data;

                    self.datalist(data);

                },true);
            },
            datalist :function (data) {
                for (var i = 0; i < data.length && i < 5; i++) {

                    $("#safetContent").append(`<li style="margin: 5px 0px;">
                                                          <div class="row" style="padding-bottom: 15px;">
                                                               <div class="col-20 safetUnitName">` + common.transNullundefined(data[i].orgName) + `</div>
                                                               <div class="col-70">
                                                                  <div id="unit_` + data[i].orgId + `" class="column"></div>
                                                               </div>
                                                               <div style="width: 10%;" class="column_num">` + common.transNullundefined(data[i].score.toFixed(1)) + `</div>
                                                          </div>
                                                     </li>`);
                    var score = common.getScore(data[i].score.toFixed(1));
                    if (score==10){
                        $("#unit_"+data[i].orgId).css('background-color','#ffcf7c');
                    } else if(score==20){
                        $("#unit_"+data[i].orgId).css('background-color','#ff011e');
                    }else{
                        $("#unit_"+data[i].orgId).css('background-color','#8dd156');
                    }
                    $("#unit_" + data[i].orgId).css('width', data[i].score.toFixed(1) + '%');

                }
            }
        },
    }
</script>
